<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
		body {
			background-color: #DEB887;
			/* text-align: center; */
		}
		
		.title {
			font-style: italic;
			text-align: center;
			font-family: Monaco;
			font-size: 20px;
			color: #FF7F24;
		}
		
		.calc {
			background-color: #EEA9B8;
			font-family: Monaco;
			font-size: 16px;
			width: 750px;
		}
		
	</style>
	<script type="text/javascript">
		window.onload = function() {
			var inputNum1 = document.getElementById("inputNum1");
			var inputNum2 = document.getElementById("inputNum2");
			inputNum1.onchange = function() {
				checkNumers(this);
			}
			
			inputNum2.onchange = function() {
				checkNumers(this);
			}
		};
		
		function checkNumers(target) {
//			var value = parseInt(target.value); 
//			alert(typeof(value));
//			
//			
//			if(!(valueNum instanceof Number)) {
//				alert("You have to input a \'number\'!");
//				value = ""; 
//			}
		}
		
	</script>
	<center>
		<title>Pony's Dynamic Web Site</title>
		<h1>Welcome! This is Pony's Dynamic Web Site!</h1>
		<h2>Easy Online Calculator</h2>
	</center>
</head>


<body>
	<center>
		<div class="title">
			You can use the following calculator...
			<div style="position:relative; left:-250px; top:0px width:150px">
				<img src="./images/calc.jpg" align="right" width="150px" />
			</div>
		</div>
		
		<div class="calc">
			
			<form action="calc.do" method="POST">
				You can input a number here: <input type="text" name="inputNum1" id="inputNum1" /><br />
				You can input second number here: <input type="text" name="inputNum2" id="inputNum2" /><br />
				Choose how you want to do with these numbers you: <br />
				<input type="radio" name="action" value="add" />add &nbsp;
				<input type="radio" name="action" value="minus" />minus &nbsp;
				<input type="radio" name="action" value="multiplication" />multiplication &nbsp;
				<input type="radio" name="action" value="division" />division<br />
				<input type="submit" value="Sumit" /><br />
			</form>
			<span style="font-size:15px; color:#660000;">Do you like my calculator?</span><br />
			<span style="font-size:15px; color:#660000;">Do you want to login right now or register an account now?</span><br />
			<a href="login.html"><img alt="login right now" src="./images/login.jpg" /></a>
		</div>
		
		<form action="hellopony.do" method="POST" >
			你喜歡狗嗎? Do you like dogs?<br />
			<input type="radio" name="dog" value="Yes" />Yes, I like dogs.<br />
			<input type="radio" name="dog" value="No" />No, I don't like dogs.<br />
			寵物狗的名字 (dog's name): 
			<input type="text" name="dogName" /><br />
			寵物狗的顏色 (dog's color):
			<input type="text" name="dogColor" /><br />
			<input type="submit" value="確認送出" />
		</form>
		<br />
		<a href="mp3.do">Do You want to listen some music?</a><br />
		<a href="product/action.do?name=bass&price=231.3">check our product now</a>
				
		<!-- <a href="Recipes/HopsReport.do" >link 1</a>   -->
		<table border="0">
			<tr>
				<td><a href="Recipes/HopsReport.do" >link 1</a></td>
			</tr>
			<tr>
				<td><a href="Recipes/HopsList.do" >link 2</a></td>
			</tr>
			<tr>
				<td><a href="Recipes/Modify/ModRecipes.do" >link 3</a></td>
			</tr>
			<tr>
				<td><a href="HopsList.do" >link 4</a></td>
			</tr>
			<tr>
				<td><a href="Recipes/Add/AddRecipes.do" >link 5</a></td>
			</tr>
		</table>
		
	</center>
</body>
</html>